<template>
  <div class="app-container">
    <!-- 搜索相关区域 -->
    <div class="filter-container">
      <el-form :inline="true" :model="pageQuery" class="demo-form-inline">
        <div>
          <el-form-item label="账单编号:">
            <el-input v-model="pageQuery.sym" size="mini" placeholder="账单编号" />
          </el-form-item>
        </div>
        <el-form-item label="账单类型:">
          <el-select v-model="pageQuery.source" size="mini" placeholder="选择账单类型">
            <el-option label="电商" value="电商" />
            <el-option label="平台充值" value="平台充值" />
            <el-option label="平台提现" value="平台提现" />
          </el-select>
        </el-form-item>
        <el-form-item label="账单类别:">
          <el-select v-model="pageQuery.type" size="mini" placeholder="选择账单类别">
            <el-option label="入款" value="入款" />
            <el-option label="退款" value="退款" />
            <el-option label="支付" value="支付" />
          </el-select>
        </el-form-item>
        <el-form-item label="账单时间:">
          <el-date-picker v-model="createT" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
          </el-date-picker>
        </el-form-item>
        <div>
          <el-form-item>
            <el-button size="small" @click="reset()">重置</el-button>
            <el-button type="primary" size="mini" icon="el-icon-search" @click="getPage()">查询</el-button>
          </el-form-item>
        </div>

      </el-form>
      <el-button :loading="downloadLoading" size="small" icon="el-icon" @click="handleDownload_before()">导出</el-button>
    </div>

    <!-- 列表相关区域 -->
    <el-table v-loading="pageLoading" :data="pageVO.list" border fit highlight-current-row style="width: 100%;">
      <!-- 序号 -->
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"></span>
        </template>
      </el-table-column>
      <!-- 账单编号 -->
      <el-table-column label="账单编号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.sym }}</span>
        </template>
      </el-table-column>
      <!-- 账单时间 -->
      <el-table-column label="账单时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
      <!-- 账单金额 -->
      <el-table-column label="账单金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.amount/100 }}</span>
        </template>
      </el-table-column>
      <!-- 账单方向 -->
      <el-table-column label="账单方向" align="center">
        <template slot-scope="{row}">
          <span>{{ row.type }}</span>
        </template>
      </el-table-column>
      <!-- 账单类型 -->
      <el-table-column label="入款来源/退款去向" align="center">
        <template slot-scope="{row}">
          <span>{{ row.source }}</span>
        </template>
      </el-table-column>
      <!-- 账单状态 -->
      <el-table-column label="账单状态" align="center">
        <template slot-scope="{row}">
          <span v-if="row.status==1">成功</span>
          <span v-if="row.status==2">失败</span>
        </template>
        </el-table-column>
        <!-- 订单数量 -->
        <el-table-column label="订单数量" align="center">
          <template slot-scope="{row}">
            <span>{{ row.amount/100 }}</span>
          </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
            <el-button @click="billDetail(row.shopTurnoverId)" type="text">
              详情
            </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <pagination v-show="pageVO.total>0" :total="pageVO.total" :page.sync="pageQuery.pageNum"
      :limit.sync="pageQuery.pageSize" @pagination="getPage()" />
    <!-- 弹窗, 新增 / 修改 -->
  </div>
</template>

<script>
  import * as api from '@/api/billManagement/billManagement'
  import Pagination from '@/components/Pagination'

  export default {
    name: '',
    components: {
      Pagination
    },
    data() {
      return {
        downloadLoading: false,
        // 查询的参数
        pageQuery: {
          pageSize: 10,
          pageNum: 1,
          sym: null,
          source: null,
          type: null,
          startAt: null,
          endAt: null
        },
        createT: [],
        // 返回参数
        pageVO: {
          list: [], // 返回的列表
          total: 0, // 一共多少条数据
          pages: 0 // 一共多少页
        },
        // 导出新数据
        NewpageVO: {
          list: [], // 返回的列表
          total: 0, // 一共多少条数据
          pages: 0 // 一共多少页
        },
        // 导出新数据
        NewpageSize: '',
        pageQuery1: {
          pageSize: '',
          pageNum: 1,
          sym: null,
          source: null,
          type: null,
          startAt: null,
          endAt: null
        },
        searchParam1: {},
        // loading
        pageLoading: true,
        // 查询参数
        searchParam: {},
        addOrUpdateVisible: false,
        filename: '账单流水单', //导出文件名
        bookType: 'xlsx', //导出类型
      }
    },
    mounted() {
      this.getPage()
    },
    methods: {
      //流水详情
      billDetail(shopTurnoverId){
        this.$router.push({
          path: '/bill/billDetail',
          query: {
            shopTurnoverId: shopTurnoverId
          }
        })
      },
      //获取表格序号
      getIndex(index) {
        return (this.pageQuery.pageNum - 1) * this.pageQuery.pageSize + index + 1
      },

      // 导出
      handleDownload_before(){
        this.pageQuery1.pageSize = this.NewpageSize
        this.pageQuery1.pageNum = 1
        this.pageQuery1.sym = this.pageQuery.sym
        this.pageQuery1.source = this.pageQuery.source
        this.pageQuery1.type = this.pageQuery.type
        this.pageQuery1.startAt = this.pageQuery.startAt
        this.pageQuery1.endAt = this.pageQuery.endAt
        api.page({
          ...this.pageQuery1,
          ...this.searchParam1
        }).then(pageVO1 => {
          this.NewpageVO = pageVO1
          this.pageLoading = false
        })
        setTimeout(() => {
                this.handleDownload(); //调用export2Excel函数，填写表头和对应字段
              },500);
      },
      handleDownload() {
        import('@/utils/Export2Excel').then(excel => {
          this.downloadLoading = true
          const tHeader = [ '账单编号', '账单时间', '账单金额', '账单类型', '账单类别', '账单状态']
          const filterVal = [ 'sym', 'createTime', 'amount', 'source', 'type', 'status']
          const list = this.NewpageVO.list
          const data = this.formatJson(filterVal, list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: this.filename,
            autoWidth: true,
            bookType: this.bookType
          })
          this.downloadLoading = false
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === this.pageQuery.createTime) {
            return this.pageQuery.createTime(v[j])
          } else {
            return v[j]
          }
        }))
      },
      // 重置
      reset() {
        this.createT = [],
          this.pageQuery.sym = null
        this.pageQuery.source = null
        this.pageQuery.type = null
        this.getPage()
      },
      getPage() {
        this.pageQuery.startAt = this.createT[0]
        this.pageQuery.endAt = this.createT[1]
        this.pageLoading = true
        api.page({
          ...this.pageQuery,
          ...this.searchParam
        }).then(pageVO => {
          this.pageVO = pageVO
          this.NewpageSize = this.pageVO.total
          this.pageLoading = false
        })
      },

      // 刷新回调用
      refreshChange() {
        this.page = this.$refs.crud.$refs.tablePage.defaultPage
        this.getPage(this.page)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .filter-container {
    display: block;
    padding: 20px;
    background: #f8f8f9;
    margin-bottom: 20px;
  }
</style>
